<template>
  <div class="app-container customer-div">
    <div style="margin-top: 20px">
      <!--搜索-->
      <el-form :inline="true" :model="listQuery" size="mini" label-width="120px">
        <el-form-item label="客户名称：">
          <el-autocomplete
            clearable
            class="inline-input"
            value-key="customerName"
            :fetch-suggestions="querySearch"
            v-model="listQuery.keyword"
            placeholder="请输入内容"
            @select="handleSelectCustomerName"
            :trigger-on-focus="false"
          ></el-autocomplete>
        </el-form-item>
        <el-form-item label="统一社会信用码：" label-width="150px">
          <el-input v-model="listQuery.businessCode" clearable class="input-width" style="width:195px"></el-input>
        </el-form-item>
        <el-form-item label="客户状态：">
          <el-select v-model="listQuery.customerState" class="input-width" style="width:195px" placeholder="请选择" clearable>
            <el-option :value="item.cddId" :label="item.cddValue" :key="item.cddId" v-for="item in customerStateList"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户性质：">
          <el-select v-model.number="listQuery.customerQuality" class="input-width" style="width:195px" placeholder="请选择" clearable>
            <el-option :value="item.cddId" :label="item.cddValue" :key="item.cddId" v-for="item in customerQualityList"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户分类：">
          <el-select v-model.number="listQuery.customerType" class="input-width" style="width:195px" placeholder="请选择" clearable>
            <el-option :value="item.cddId" :label="item.cddValue" :key="item.cddId" v-for="item in customerTypeList"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="客户来源：">
          <el-select v-model.number="listQuery.customerSource" class="input-width" style="width:195px" placeholder="请选择" clearable>
            <el-option :value="item.cddId" :label="item.cddValue" :key="item.cddId" v-for="item in customerSourceList"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="客户等级：">
          <el-select v-model.number="listQuery.customerGrade" class="input-width" style="width:195px" placeholder="请选择" clearable>
            <el-option value="A1" label="A1" key="A1"></el-option>
            <el-option value="A2" label="A2" key="A2"></el-option>
            <el-option value="A3" label="A3" key="A3"></el-option>
            <el-option value="A4" label="A4" key="A4"></el-option>
            <el-option value="B" label="B" key="B"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预计成交日期：">
          <el-date-picker
            :default-time="['00:00:00', '23:59:59']"
            v-model="listQuery.transactionTime"
            type="daterange"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="月毛利区间：">
          <el-select v-model.number="listQuery.customerDegree" class="input-width" style="width:195px" placeholder="请选择" clearable>
            <el-option :value="item.cddId" :label="item.cddValue" :key="item.cddId" v-for="item in customerDegreeList"></el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="跟进状态：">
        <el-select v-model="listQuery.customerTracking" class="input-width" style="width:195px" placeholder="请选择" clearable>
          <el-option :value="item.cddId" :label="item.cddValue" :key="item.cddId" v-for="item in customerTrackingList"></el-option>
        </el-select>
      </el-form-item>
        <el-form-item label="最后联系日期：">
          <el-date-picker
                  :default-time="['00:00:00', '23:59:59']"
                  v-model="listQuery.trackingTime"
                  type="daterange"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="创建日期：">
          <el-date-picker
                  :default-time="['00:00:00', '23:59:59']"
                  v-model="listQuery.createdAt"
                  type="daterange"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="更新日期：">
          <el-date-picker
                  :default-time="['00:00:00', '23:59:59']"
                  v-model="listQuery.updatedAt"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="采购评级：">
          <el-select v-model.number="listQuery.customerLabel" class="input-width" style="width:195px" placeholder="请选择" clearable >
            <el-option value="A类" label="A类" key="A类"></el-option>
            <el-option value="B类" label="B类" key="B类"></el-option>
            <el-option value="C类" label="C类" key="C类"></el-option>
            <el-option value="D类" label="D类" key="D类"></el-option>
            <el-option value="E类" label="E类" key="E类"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否为外贸客户" >
          <el-select v-model="listQuery.isChina" placeholder="请选择" clearable>
            <el-option :key="2" label="是" :value="2"></el-option>
            <el-option :key="1 " label="否" :value="1 "></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleSearchList()" type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
  <div class="table-container">
    <el-table
      v-loading="listLoading"
      :data="tableData"
      border
      style="width: 100%; margin-top: 20px">
      <el-table-column  align="center" label="ID" prop="customerId" width="80"></el-table-column>
      <el-table-column  align="center" label="金蝶编号" prop="kingNumber"></el-table-column>
      <el-table-column  align="center" label="社会统一信用码" prop="businessCode" width="180"></el-table-column>
      <el-table-column
        label="公司名称"
        width="300">
        <template slot-scope="scope">
          <el-link @click="toDetail(scope.row)" type="primary"  style="font-size:12px">
            {{scope.row.customerName}}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column
              align="center"
              label="客户等级"
              width="100">
        <template slot-scope="scope">
          <span>
            {{scope.row.customerGrade}}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="customerDegree.cddValue"
        label="月毛利区间"
        align="center"
        width="180">
      </el-table-column>
      <el-table-column
              label="主联系人"
              align="center"
              width="180">
        <template slot-scope="scope">
         {{scope.row.contactName}}
       </template>
     </el-table-column>
     <el-table-column
      prop="contactMobile"
      label="联系方式"
      align="center"
      width="100">
     </el-table-column>
     <el-table-column
       prop="customerState.cddValue"
       label="客户状态"
       width="100"
       align="center">
      </el-table-column>
      <el-table-column
        label="预计成交日期"
        width="150"
        align="center">
        <template slot-scope="scope">
          {{scope.row.transactionEndTime*1000 | formatCreateTime}}
        </template>
      </el-table-column>
      <el-table-column
        prop="trackingTime"
        label="最近联系日期"
        width="150"
        align="center">
      </el-table-column>
      <el-table-column
        prop="lastOrderTime"
        label="最近成交时间"
        width="150"
        align="center">
      </el-table-column>
      <el-table-column
              label="负责人"
              width="100"
              align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.charge">
               {{scope.row.charge.realName}}
           </span>
        </template>
      </el-table-column>
      <el-table-column
              label="客户分类"
              width="150"
              align="center">
        <template slot-scope="scope">
           <span v-if="scope.row.customerType">
               {{scope.row.customerType.cddValue}}
           </span>
        </template>
      </el-table-column>
      <el-table-column
              label="客户行业"
              width="100"
              align="center">
        <template slot-scope="scope">
            <span v-if="scope.row.customerIndustry">
               {{scope.row.customerIndustry.cddValue}}
           </span>
        </template>
      </el-table-column>
      <el-table-column
              label="客户来源"
              width="100"
              align="center">
        <template slot-scope="scope">
           <span v-if="scope.row.customerSource">
               {{scope.row.customerSource.cddValue}}
           </span>
        </template>
      </el-table-column>
      <el-table-column
              label="客户种类"
              width="100"
              align="center">
        <template slot-scope="scope">
         <span>{{ scope.row.isChina | filterIsChina }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="创建日期"
          width="150"
          align="center">
        <template slot-scope="scope">
          {{scope.row.createdAt}}
        </template>
      </el-table-column>
      <el-table-column
              label="创建人"
              width="100"
              align="center">
        <template slot-scope="scope">
            <span v-if="scope.row.creator">
                {{scope.row.creator.realName}}
            </span>
        </template>
      </el-table-column>
      <el-table-column
              label="流入时间"
              width="150"
              align="center">
        <template slot-scope="scope">
          {{scope.row.deleteTime == 0 ? '' : scope.row.deleteTime}}
        </template>
      </el-table-column>
      <el-table-column
              label="流入理由"
              width="300">
        <template slot-scope="scope">
          {{scope.row.deleteReason}}
        </template>
      </el-table-column>
      <el-table-column
               fixed="right"
               label="操作"
               align="center">
         <template slot-scope="scope">
           <el-button
                   type="text"
                   size="mini"
                   v-if="scope.row.isMyCanRecover==1"
                   @click="huanyuang(scope.row)">还原
           </el-button>
         </template>
      </el-table-column>
   </el-table>
  </div>

    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[10,15,20]"
        :total="count">
      </el-pagination>
    </div>
    <!-- 转移 -->
    <cmsTransfer ref='cmsTransfer' @update="handleSearchList"></cmsTransfer>


  </div>
</template>
<script>
import {
  partnerList,
  getCustomerOption,
  delCustomer,
} from '@/api/partner';
import { mapGetters } from 'vuex';
import store from '@/store';
import { formatDate } from '@/utils/date';
import { getToken } from '@/utils/auth';
import cmsTransfer from '@/views/cms/components/cmsTransfer.vue';
const defaultListQuery={
  pageNum: 1,
  pageSize: 10,
  keyword: '',
  customerState:'',
  customerType:'',
  customerSource:'',
  customerQuality:'',
  customerDegree:'',
  customerTracking:'',
  transactionTime:'',
  trackingTime:'',
  createdAt:'',
  updatedAt:'',
  isChina:'',
  hasOne: 0,
  tab:'public',
  businessCode:'',
  customerGrade:'',
  customerLabel:'',
  customerName:'',
  goodsName:'',
};
export default {
  name: "delList",
  props: {
    customerStateList:{//客户状态
      type: Array,
      default:()=>[]
    },
    customerTypeList:{//客户分类
      type: Array,
      default:()=>[]
    },
    customerQualityList:{//客户性质
      type: Array,
      default:()=>[]
    },
    customerDegreeList:{//月毛利区间
      type: Array,
      default:()=>[]
    },
    customerTrackingList:{//跟进状态
      type: Array,
      default:()=>[]
    },
  },
  data(){
    return {
      roles:store.getters.roles ? store.getters.roles : [],
      listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
      dialogVisible3: false,
      btnLoading3: false,
      tableData: [],
      count: 0,
      listLoading: false,
      areaIndex1:null,
      areaIndex2: null,
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
  },
  created() {
  },
  filters: {
    formatCreateTime(time) {
      if(time){
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
      }else{
        return '--'
      }
    },
    filterIsChina(val){
      if(val== 2){
        return '外贸'
      } else if(val == 1){
        return '国内'
      }
    },
  },
  components: {
    cmsTransfer
  },
  methods: {
    //还原客户
    huanyuang(item){
      let data = {};
      data.customerIds = item.customerId+'';
      data.isDelete = 0;
      delCustomer(data).then((res)=>{
        this.$message({
          type: 'success',
          message: '已还原!'
        });
        this.getUserList();
      })
    },
    handleSearchList(){
      this.listQuery.pageNum = 1;
      this.getUserList();
    },
    init(tab){
      this.listQuery.tab = tab;
      this.getUserList();
    },
    toDetail(item){
      let routeData = this.$router.resolve({name:'customerDetail',query:{id:item.customerId}});
      window.open(routeData.href);
    },
    //客户名称输入匹配
    querySearch(queryString, cb){
      let data = {};
      data.keywords = queryString;
      getCustomerOption(data).then((res)=>{
        cb(res);
      })
    },
    //选择客户名称
    handleSelectCustomerName(item){
      this.listQuery.keyword = item.customerName
    },
    //获取客户列表
    getUserList() {
      this.listLoading = true;
      partnerList(this.listQuery).then(response => {
        this.tableData = response.list;
        this.count = response.count;
        this.listLoading = false;
      }).catch(()=>{
        this.listLoading = false;
      });
    },
    handleSizeChange(val){
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getUserList();
    },
    handleCurrentChange(val){
      this.listQuery.pageNum = val;
      this.getUserList();
    },
  },
}
</script>
<style scoped lang="scss">
.upload-div{
    text-align: center;
    position:relative;
    #upload{
      opacity: 0;
      position: absolute;
      z-index: 1;
      width:154px;
      height:40px
    }
  }
</style>



